<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>页面格式化显示数据</title>
<meta name="description" content="" />
<meta name="author" content="pc" />
<meta name="viewport"
	content="width=device-width,initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta name="screen-orientation" content="portrait">
<meta name="format-detection" content="telephone=no" />
<#include "/inc/common.html">
</head>
<body>
<h4 class="contentTitle">使用vkbeautify.js格式化显示json,xml,css,sql数据</h4>
<div class="table-responsive">
	<table class="table table-bordered row mx-0 text-white">
		<!-- <caption>使用vkbeautify.js格式化显示json,xml,css,sql数据</caption> -->
		<thead>
			<tr>
				<th class="col-md-2" style='text-align: center;'>类型</th>
				<th class="col-md-6" style='text-align: center;'>源数据</th>
				<th class="col-md-5" style='text-align: center;'>格式化</th>
			</tr>
		</thead>
		<tbody>
			<tr>
			    <td class="col-md-2" style='text-align: center;'>JSON</td>
				<td class="col-md-6"><textarea id="bqs" name="bqs" readonly="true" cols="68" rows="12">${jsonData}</textarea></td>
				<td class="col-md-4"><textarea id="td" name="td" readonly="true" cols="55" rows="12">${jsonData}</textarea></td>
			</tr>
			<tr>
			    <td class="col-md-2" style='text-align: center;'>XML</td>
				<td class="col-md-6" ><textarea id="dhb" name="dhb" readonly="true" cols="68" rows="3">${xmlData}</textarea></td>
				<td class="col-md-4"><textarea id="mg" name="mg" readonly="true" cols="55" rows="3">${xmlData}</textarea></td>
			</tr>
			<tr>
			    <td class="col-md-2" style='text-align: center;'>CSS</td>
				<td class="col-md-6"><textarea id="cs" name="cs" readonly="true" cols="68" rows="5">${cssData}</textarea></td>
				<td class="col-md-4"><textarea id="csc" name="csc" readonly="true" cols="55" rows="5">${cssData}</textarea></td>
			</tr>
			<tr>
			    <td class="col-md-2" style='text-align: center;'>SQL</td>
				<td class="col-md-6"><textarea id="sq" name="sq" readonly="true" cols="68" rows="4">${sqlData}</textarea></td>
				<td class="col-md-4"><textarea id="sqs" name="sqs" readonly="true" cols="55" rows="4">${sqlData}</textarea></td>
			</tr>
		</tbody>
</table>
</div>  	
</body>
<script type="text/javascript">
$(function(){
	/*JSON格式化*/
	if('${jsonData}'!=''&&'${jsonData}'.length>0){
		$("#td").val(vkbeautify.json('${jsonData}',4));
	} 
	/*XML格式化*/
	if('${xmlData}'!=''&&'${xmlData}'.length>0){
		$("#mg").val(vkbeautify.xml('${xmlData}'));
	}
	/*css格式化*/
	if('${cssData}'!=''&&'${cssData}'.length>0){
		$("#csc").val(vkbeautify.css('${cssData}', '     '));
	}
	/*sql格式化*/
	if('${sqlData}'!=''&&'${sqlData}'.length>0){
		$("#sqs").val(vkbeautify.sql('${sqlData}', '----'));
	}
})
</script>
</html>
